import React, { Component } from 'react';
import { NavBar, SearchBar, SideBar } from 'antd-mobile'
import service from '../../api'
// import { Route, Switch, Redirect } from 'react-router-dom'
import Banner from '../../components/Banner';
import BrandPros from '../../components/BrandPros';
import '../../styles/Kind.scss'
interface Kind {
    props: any
    state: any
}
class Kind extends Component {
    constructor(props: any) {
        super(props)
        this.state = {
            proCategorylist: [],
            brandlist: [],
            active: '    显卡',
            bannerlist: [],
        }
    }
    back() {
        // console.log(this.props);
        this.props.history.push('/index/home')
    }
    async componentDidMount() {
        await service.pro.getProCategorylist().then(res => {
            console.log(res.data.data[0])
            this.setState({
                proCategorylist: res.data.data,
            })
        })
        service.pro.getProCategorybrandlist({ category: this.state.active }).then(res => {
            console.log(res)
            this.setState({
                brandlist: res.data.data
            })
            service.pro.getProCategorybrandprolist({ category: this.state.active, brand: res.data.data[0].brand }).then(res => {
                var bannerlist = res.data.data[0].banners[0].split(',')
                // console.log(bannerlist);
                this.setState({
                    bannerlist
                })
            })
        })
    }
    getbannerlist(bannerlist: any) {
        this.setState({
            bannerlist
        })
    }
toSearch(){
this.props.history.push('/search')
}
    async changeCategory(category: string) {
        // await this.setState({
        //     brandlist: [],
        //     active: category
        // })
        await service.pro.getProCategorybrandlist({ category }).then(res => {
            // console.log(res.data.data[0]);
            this.setState({
                brandlist: res.data.data,
                active: category
            })
            service.pro.getProCategorybrandprolist({ category, brand: res.data.data[0].brand }).then(res => {
                var bannerlist = res.data.data[0].banners[0].split(',')
                // console.log(bannerlist)
                this.setState({
                    bannerlist
                })
            })
        })
    }
    render() {
        return (
            <div className='kind'>
                <header>
                    <NavBar onBack={() => { this.back() }}>分类页</NavBar>
                    <SearchBar placeholder='请输入店铺内商品' onFocus={this.toSearch.bind(this)} />
                </header>
                <main>
                    <SideBar defaultActiveKey={this.state.active} onChange={(key) => { this.changeCategory(key) }}>
                        {this.state.proCategorylist.map((item: any, index: number) => (
                            <SideBar.Item key={item} title={item} />
                        ))}
                    </SideBar>
                    <div className='brand'>
                        <div className='banners'>
                            <Banner swiperlist={this.state.bannerlist} />
                        </div>
                        {
                            this.state.brandlist.map((item: any, index: number) => {
                                return (
                                    <div className='brandlist' key={index}>
                                        <h4>{item.brand}</h4>
                                        <BrandPros
                                            key={item.brand}
                                            getbannerlist={this.getbannerlist.bind(this)}
                                            category={this.state.active}
                                            brand={item.brand} />
                                    </div>
                                )
                            })
                        }
                    </div>
                </main>
            </div>
        );
    }
}

export default Kind;